import React, { Component } from "react";
// redux 数据监听
import { connect } from "react-redux";
// 组件
import Childredux from "./childredux";
import Chil from "./chil";

class redux extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.handleBtnClick1 = this.handleBtnClick1.bind(this);
  }
  handleBtnClick1() {
    this.props.deleteFromArray({ type: "2", number: this.props.numberb });
  }
  handleBtnClick() {
    const { dispatch } = this.props;
    const action = {
      // type: actionTypes.ADD_TEST,
      type: "2",
      number: this.props.numberb,
    };

    dispatch(action); //通过dispatch修改store数据
  }
  render() {
    const { PayDecrease, PayDecrease1 } = this.props;
    return (
      <div>
        <div>
          <button onClick={this.handleBtnClick1}>
            自增this.handleBtnClick1
          </button>
        </div>
        <div>
          {/* 没有 ----mapDispatchToProps*/}
          {/* <button onClick={this.handleBtnClick.bind(this)}>自增handleBtnClick</button> */}
        </div>
        <div>
          <button onClick={PayDecrease}>
            自增(PayDecrease,mapDispatchToProps)
          </button>
        </div>
        <div>
          <button
            onClick={() => {
              PayDecrease1(this.props.numbera);
            }}
          >
            自增(PayDecrease1,mapDispatchToProps)
          </button>
        </div>
        我是redux{this.props.numbera}---{this.props.numberb}

        <Childredux></Childredux>
        <Chil></Chil>
      </div>
    );
  }
}

// 声明数据
const mapStateToProps = (state) => {
  console.log(state, "====redux");
  return {
    // number: state.number //单个数据
    numbera: state.a.number, //多个数据
    numberb: state.b.number, //多个数据
  };
};
//需要触发什么行为(多个数据)  挂载到 props上
function mapDispatchToProps(dispatch) {
  return {
    deleteFromArray: (array) => {
      console.log(array, "deleteFromArray");
      dispatch(array);
    },
    PayDecrease1: (val) => {
      console.log(val, "===PayDecrease1");
      dispatch({ type: "1", number: val });
    },
    PayDecrease: (val) => {
      return dispatch({ type: "1", number: 10 });
    },
  };
}

// ----handleBtnClick 
// export default connect(mapStateToProps)(redux);

export default connect(mapStateToProps, mapDispatchToProps)(redux);
